<template>
    <el-tabs v-model="activeTag">
        <el-tab-pane label="修改用户" name="userUpdateTAG">
            <el-form ref="userUpdateRef" :model="userUpdate" :rules="rules" label-width="100px" size="medium" >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="nickName">
                            <el-input v-model="userUpdate.nickName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设置部门" prop="phone">
                            <treeselect v-model="userUpdate.departmentId" :options="companyTree" :show-count="true"
                                placeholder="请选择归属部门" :normalizer="normalizer" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="账号" prop="userName">
                            <el-input v-model="userUpdate.userName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设置角色" prop="roleList">
                            <el-select v-model="userUpdate.roleIds" multiple  placeholder="请选择角色"  style="width:100%">
                                <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="userUpdate.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系邮箱" prop="email">
                            <el-input v-model="userUpdate.email"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="有效期" prop="expirationTime">
                            <el-date-picker v-model="expirationTime" type="date" placeholder="选择日期"
                                :disabled="isPermanent" />
                            <el-checkbox v-model="isPermanent" @change="handlerExpiation">永久有效</el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="身份证号" prop="cardCode">
                            <el-input v-model="userUpdate.cardCode"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    components: { Treeselect },
    props: {
        userUpdate: {
            type: Object,
            required: true,
        },
        rules: {
            type: Object,
            required: true,
        },
        companyTree: {
            type: Array,
            required: true
        },
        roleList: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            activeTag: "userUpdateTAG",
            isPermanent: false,
            expirationTime: this.userUpdate.expirationTime,
            PERMANENT: ""

        }
    },
    methods: {
        handlerExpiation(event) {
            if (event) {
                this.PERMANENT = 'PERMANENT'
                this.expirationTime = ''
            } else {
                this.PERMANENT = ''
            }
        },
        //重置表单
        reset() {
            this.$refs.userUpdateRef.resetFields();
        },
        //校验表单
        validate() {
            let checkResult = true;
            this.$refs.userUpdateRef.validate((valid) => {
                checkResult = valid;
            })
            let entity = { ...this.userUpdate }
            if (this.PERMANENT) {
                entity.expirationTime = this.PERMANENT
            } else {
                entity.expirationTime = this.expirationTime
            }

            return { checkResult, entity }
        },
        //
        normalizer(node) {
            return {
                id: node.companyId,
                label: node.companyName,
                children: node.child,
            }
        },
    },
    mounted(){
        //初始化校验用户是否为永久有效的用户
        if(this.userUpdate.expirationTime && this.userUpdate.expirationTime === 'PERMANENT'){
            this.isPermanent = true;
        }
    }
}
</script>

<style scoped lang="scss">
.el-checkbox {
    padding-left: 30px;
}
</style>